<template>
    <div class="hotClassify">
      <div>
        <ul>
            <li v-for="item in hotClassfy" :key="item.imageUrl" @click="$emit('commonId' , item.commonId)">
            <a href="javascript:void(0);">
                <img :src="item.imageUrl"/>
                <p>{{item.title}}</p>
            </a>
            </li>
        </ul>
      </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
props:['val'],
data(){
    return {
        hotClassfy:""
    }
},
watch:{
    val(){
        this.hotClassfy = JSON.parse(this.val.itemData)
    }
},

}
</script>

<style lang='stylus' scoped>
.hotClassify
  padding 0.1rem 0
  ul
    width 100%
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    li
      width 20%
      a
        display: block;
        text-align: center;
        width: 100%;
      p
        font-size 0.1rem 
        width: 100%;
        color: #333333;
      img 
        width 80%
</style>